<template>
  <div class="edit-page">
    <div class="page-header">
      <el-button class="back-button" icon="el-icon-back" @click="goback">返回</el-button>
      <div class="page-title">文章{{ this.form.id?'编辑':'新增' }}</div>
    </div>
    <div class="page-body">
      <div class="body-left">
        <el-form
          label-width="125px"
          :model="form"
          ref="form"
          :rules="rules"
        >
          <el-form-item prop="title" label="标题">
            <el-input v-model="form.title" size="mini" />
          </el-form-item>
          <el-form-item prop="source" label="来源/发布人">
            <el-input v-model="form.source" size="mini" />
          </el-form-item>
          <el-form-item prop="typeId" label="所在分类">
            <TypeTreeSelect @input="getTypeId" @getValue="getTypeNode" :value="form.typeId" size="mini" />
          </el-form-item>
          <el-form-item prop="affiliationId" label="可见范围">
            <ClassifyTreeSelect @input="getBranchId" @getValue="getBranchNode" :value="form.affiliationId" size="mini" />
          </el-form-item>
          <el-form-item label="分类排序">
            <el-input-number
              v-model="form.sort"
              controls-position="right"
              size="mini"
              :min="0"
            />
          </el-form-item>
          <el-form-item label="发布状态">
            <el-switch
              v-model="form.status"
              :inactive-value="1"
              :active-value="2"
            />
          </el-form-item>
        </el-form>
      </div>
      <div class="body-right">
        <!-- <v-md-editor
          v-model="form.detail"
          height="100%"
          mode="edit"
          :left-toolbar="leftToolbar"
          :right-toolbar="rightToolbar"
          :disabled-menus="[]"
          @upload-image="handleUploadImage"
        /> -->
      </div>
    </div>
    <div class="page-footer">
      <el-button type="warning" size="mini" @click="submit(0)">存为草稿</el-button>
      <el-button type="primary" size="mini" @click="submit(2)">发布</el-button>
    </div>
  </div>
</template>
<script>
import ClassifyTreeSelect from '@/components/classifyTree/classifyTreeSelect'
import TypeTreeSelect from './typeTreeSelect'
import { add, edit } from '@/api/onlineClassroom/partyAffairsKnowledge'
export default {
  components: {
    ClassifyTreeSelect,
    TypeTreeSelect
  },
  data () {
    return {
      form: {},
      rules: {
        title: [ { required: true, message: '请输入文章标题', trigger: 'change' } ],
        affiliationId: [ { required: true, message: '请选择可见范围', trigger: 'change' } ],
        source: [ { required: true, message: '请输入来源/发布人', trigger: 'change' } ]
      },
      leftToolbar: 'undo redo | h bold italic strikethrough quote | ul ol hr | link image code',
      rightToolbar: ''
    }
  },
  methods: {
    init (row) {
      this.form = { ...row }
    },
    goback () {
      this.form = {}
      this.resumeData = []
      this.stageData = []
      this.$emit('goback', false)
    },
    submit () {
      this.$refs.form.validate((valid) => {
        if (valid) {
          let submitForm = add
          if (this.form.id) {
            submitForm = edit
          }
          const obj = {
            ...this.form,
            deveCharacterBiographiesDTOList: this.resumeData,
            developmentStageDTOList: this.stageData
          }
          submitForm(obj).then((res) => {
            this.$message.success('保存成功')
            this.form = {}
            this.resumeData = []
            this.stageData = []
            this.$emit('goback', true)
          })
        }
      })
    },
    handleUploadImage (event, insertImage, files) {
      if (files.length > 0) {
        this.uploadFile(files[0]).then(res => {
          insertImage({
            url: res.url,
            desc: res.fileName,
            width: 'auto',
            height: 'auto'
          })
        })
      }
    },
    // uploadFile (file) {
    //   return new Promise((resolve, reject) => {
    //     const paramsData = new FormData()
    //     paramsData.append('fileType', 0)
    //     paramsData.append('file', file)
    //     addBimFile(paramsData).then(({ code, data, msg }) => {
    //       if (code === 200) {
    //         resolve(data)
    //       } else {
    //         reject(msg)
    //       }
    //     }).catch(err => {
    //       reject(err)
    //     })
    //   })
    // },
    getBranchNode (node) {
      this.form.affiliationId = node?.id || null
      // this.form.branchName = node?.fullNamePartyOrg || null
    },
    getBranchId (id) {
      // console.log('id', id)
    },
    getTypeNode (node) {
      this.form.typeId = node?.id || null
      // this.form.branchName = node?.fullNamePartyOrg || null
    },
    getTypeId (id) {
      // console.log('id', id)
    }
  }
}
</script>
<style scoped lang="scss">
  .page-header {
    display: flex;
    height: 60px;
    align-items: center;
    border-bottom: 1px solid #ddd;
    .back-button {
      margin-right: 16px;
    }
    .page-title {
      font-size: 18px;
      font-weight: 600;
    }
  }
  .page-body {
    padding-top:8px;
    display: flex;
    height: calc(100vh - 190px);
    overflow-y: auto;
    .body-left {
      width: 450px;
    }
    .body-right {
      margin-left: 16px;
      flex:1
    }
  }
  .page-footer {
    height: 60px;
    text-align: center;
    line-height: 60px;
  }
</style>
